<script setup lang="ts">
import TipMessage from '@/components/TipMessage.vue';
import { computed, ref } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';

const $route = useRoute()
const active = ref($route.meta.index)
const transitionName = ref()
onBeforeRouteUpdate((to: any, from: any) => {
    active.value = to.meta.index
    if (to.meta.index > from.meta.index) {
        transitionName.value = 'slide-left'
    } else {
        transitionName.value = 'slide-right'
    }
})
//路由参数变化重新加载页面
const routerKey = computed(() => {
    return $route.path + Math.random()
})
</script>
<template>
    <tip-message></tip-message>
    <van-tabbar route v-show="$route.meta.showNav" v-model="<number>active">
        <van-tabbar-item to="/BookShelf">
            <template #icon>
                <img v-if="active == 0" src="../assets/img/t0_1.png" alt="">
                <img v-else src="../assets/img/t0_0.png" alt="">
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home">
            <template #icon>
                <img v-if="active == 1" src="../assets/img/t1_1.png" alt="">
                <img v-else src="../assets/img/t1_0.png" alt="">
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/about">
            <template #icon>
                <img v-if="active == 2" src="../assets/img/t2_0.png" alt="">
                <img v-else src="../assets/img/t2_1.png" alt="">
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/Person">
            <template #icon>
                <img v-if="active == 3" src="../assets/img/t3_1.png" alt="">
                <img v-else src="../assets/img/t3_0.png" alt="">
            </template>
        </van-tabbar-item>
    </van-tabbar>
    <!-- AD -->
    <GetNews />
    <!-- <LoginNow /> -->

    <router-view v-slot="{ Component }">
        <transition :name="transitionName" mode="out-in">
            <div :key="$route.path">
                <keep-alive>
                    <component :is="Component" :key="routerKey" />
                </keep-alive>
            </div>
        </transition>
    </router-view>



    <!-- <keep-alive>
        <tip-message></tip-message>
        <van-tabbar route v-show="$route.meta.showNav" v-model="<number>active">
            <van-tabbar-item to="/BookShelf">
                <template #icon>
                    <img v-if="active == 0" src="../assets/img/t0_1.png" alt="">
                    <img v-else src="../assets/img/t0_0.png" alt="">
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/home">
                <template #icon>
                    <img v-if="active == 1" src="../assets/img/t1_1.png" alt="">
                    <img v-else src="../assets/img/t1_0.png" alt="">
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/about">
                <template #icon>
                    <img v-if="active == 2" src="../assets/img/t2_0.png" alt="">
                                                <img v-else src="../assets/img/t2_1.png" alt="">
                                            </template>
                                        </van-tabbar-item>
                                        <van-tabbar-item to="/Person">
                                            <template #icon>
                                                <img v-if="active == 3" src="../assets/img/t3_1.png" alt="">
                                                <img v-else src="../assets/img/t3_0.png" alt="">
                                            </template>
                                        </van-tabbar-item>
                                    </van-tabbar>
                                    AD
                                    <GetNews />
                                    <router-view :key="routerKey">
                                    </router-view>
                                </keep-alive> -->
</template>

<style scoped lang='less'>
.van-tabbar {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 12px;
    box-sizing: border-box;
    margin: auto;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    box-shadow: 0 0 24px -6px gainsboro;
    justify-content: space-evenly;
    z-index: 99;
}

.van-tabbar-item--active {
    border-top: 2px solid var(--mcolor) !important;

    img {
        transform: scale(1.15);
    }

    background-color: var(--bg);
}

.van-tabbar-item {
    border-top: 2px solid transparent;
    flex-direction: row;
    align-items: center;
    transition: all 0.5s;
    max-width: 48px;

    img {
        transition: all 0.5s;
    }
}

:deep(.van-tabbar-item__icon) {
    margin: 0;
}

:deep(.van-nav-bar__title) {
    font-weight: normal;
}

//过渡
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    transition: all 0.5s;
}

.slide-left-leave-active,
.slide-right-leave-active {
    transition: all 0.1s;
}

.slide-right-enter-to {
    transform: translateX(0);
    opacity: 1;
}

.slide-right-enter-from {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-right-leave-to {
    opacity: 0;
}

.slide-left-enter-to {
    transform: translateX(0);
    opacity: 1;
}

.slide-left-enter-from {
    transform: translateX(100%);
    opacity: 0;
}

.slide-left-leave-to {
    opacity: 0;
}
</style>